<template>
    <v-layout v-if="isLoading">
        <div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100%;">
            <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
        </div>
    </v-layout>
    <v-layout v-else>
        <div style="display: flex; flex-direction: row;width: 100%;">
            <div class="table">
                <v-card elevation="3">
                    <v-data-table-server v-model:items-per-page="data.itemsPerPage" :headers="data.headers"
                        :items-length="data.totalItems" :items="data.serverItems" :loading="data.loading" :search="data.search"
                        item-value="name" @update:options="loadItems" fixed-header fixed-footer style="max-height: 80vh; overflow-y: auto;">
                        <template v-slot:item="{ item }">
                            <tr>
                                <td>
                                    {{ item.name }}
                                </td>
                                <td>
                                    {{ item.applicant }}
                                </td>
                                <td>
                                    <v-progress-circular :model-value="item.status" color="teal" :size="40" :width="5" v-if="item.status != -1">
                                        <template v-slot:default><span class="pro1">{{ item.status }}%</span></template>
                                    </v-progress-circular>
                                    <div v-else style="color: red;">
                                        被驳回
                                    </div>
                                </td>
                                <td>
                                    <v-icon @click="updateAuditStatus(item.recordId, item.status, 100)">mdi-check</v-icon>
                                    <v-icon @click="updateAuditStatus(item.recordId, item.status, -1)">mdi-delete</v-icon>
                                </td>
                            </tr>
                        </template>
                        <template v-slot:tfoot>
                            <tr>
                                <td>
                                    <v-text-field class="search" v-model="data.name" hide-details placeholder="搜索名称..." density="compact"></v-text-field>
                                </td>
                            </tr>
                        </template>
                    </v-data-table-server>                                  
                </v-card>
            </div>
        </div>
    </v-layout>
</template>
<script setup lang="ts">
import { ref,reactive, watch } from 'vue';
import type { application } from '@/models/application';
import { GetAllAudit, UpdateAuditStatus } from '@/controllers/auditController';
import { message } from '@/utils/message';

let isLoading = ref(false)
let data = reactive({
    itemsPerPage: 10,
    headers: [
        { title: '申请名称', sortable: false, key: 'name' },
        { title: '申请人', sortable: false, key: 'applicant' },
        { title: '审批进度', sortable: false, key: 'status' },
        { title: '操作', sortable: false, key: 'option' }
    ],
    search: '',
    serverItems: [] as application[],
    loading: true,
    name: '',
    totalItems: 0
})

watch(() => data.name, () => {
    const currentTime = String(Date.now());
    data.search = currentTime;
});

function loadItems({ page, itemsPerPage }: { page: number; itemsPerPage: number }) {
    data.loading = true
    getAllAudit({ page, itemsPerPage, search: { name: data.name } }).then((result) => {
        if (result) {
            data.serverItems = result.items || [];

            data.totalItems = result.total || 0;
        }
        data.loading = false
    })
}
async function getAllAudit({ page, itemsPerPage, search }: { page: number; itemsPerPage: number; search: any }) {
    try {
        let applicationInfo = await GetAllAudit(false);
        const start = (page - 1) * itemsPerPage;
        const end = start + itemsPerPage;
        const items = applicationInfo.slice().filter(item => {
            if (search.name && !item.name.toLowerCase().includes(search.name.toLowerCase())) {
                return false
            }
            return true
        })
        const paginated = items.slice(start, end)
        return ({ items: paginated, total: items.length })
    } catch (error: any) {
        message(error.message, 'error')
    }
}
async function updateAuditStatus(recordId: number, status1: number, status2: number) {
    if (status1 == 100) {
        message("该条请求已被批准，不能再进行操作！！", 'warning')
    }else if (status1 == -1) {
        message("该条请求已被驳回，不能再进行操作！！", 'warning')
    }else{
        try {
            await UpdateAuditStatus(recordId, status2)
            loadItems({ page: 1, itemsPerPage: data.itemsPerPage });   
        } catch (error: any) {
            message(error.message, 'error')
        }
    }
}
</script>
<style>
.table{
    width: 98%;
    margin-right: 1%;
    margin-left: 1%;
    margin-bottom: 1%;
}
.data-table{
    max-height: 80vh;
    overflow-y: auto;
}
.pro1 {
    font-size: 70%;
}
.search{
    margin-left: 1%;
    margin-top: 1%;
    max-width: 70%;
}
</style>
